<template>
    <require from="./em-blog-history.css"></require>
    <em-modal classes="small" em-modal.ref="emModal" onshow.call="showHandler($event)"
        onapprove.call="approveHandler($event)">
        <div slot="header">博文历史记录</div>
        <div slot="content" class="em-blog-history">
            <div class="topbar">
                <div click.delegate="diffHandler()" class="ui mini basic button"><i
                        class="resize horizontal icon"></i>比较选择的版本</div>
            </div>
            <div class="content">
                <table class="ui very basic table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>版本</th>
                            <th>日期</th>
                            <th>更新人</th>
                            <th class="right aligned">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <em-checkbox checked.bind="blog.checked"></em-checkbox>
                            </td>
                            <td><a click.delegate="viewHistoryHandler(blog, histories.length + 1, true)">当前</a>
                                <span show.bind="blog.editor == 'Html'"><i title="html"
                                        class="html5 icon"></i></span><span show.bind="blog.editor == 'Mind'"><i
                                        title="mind" class="usb icon"></i></span><span show.bind="blog.editor ==
                                                'Excel' || blog.editor ==
                                                'Sheet'"><i title="excel" class="table icon"></i></span><span
                                    show.bind="blog.editor != 'Html' && blog.editor != 'Mind' && blog.editor !=
                                            'Excel' && blog.editor !=
                                            'Sheet'"><img title="markdown" style="width: 16px;" src="img/markdown.png"
                                        alt=""></span></td>
                            <td title="${blog.updateDate | date}">${blog.updateDate | timeago}</td>
                            <td>${blog.updater.name}</td>
                            <td class="right aligned"></td>
                        </tr>
                        <tr repeat.for="item of histories">
                            <td>
                                <em-checkbox checked.bind="item.checked"></em-checkbox>
                            </td>
                            <td><a click.delegate="viewHistoryHandler(item, histories.length - $index)">v.${histories.length
                                    - $index}</a> <span show.bind="item.editor == 'Html'"><i title="html"
                                        class="html5 icon"></i></span><span show.bind="item.editor == 'Mind'"><i
                                        title="mind" class="usb icon"></i></span><span
                                    show.bind="item.editor == 'Excel' || item.editor == 'Sheet'"><i title="excel"
                                        class="table icon"></i></span><span show.bind="item.editor != 'Html' && item.editor != 'Mind' && item.editor !=
                                    'Excel' && item.editor !=
                                    'Sheet'"><img title="markdown" style="width: 16px;" src="img/markdown.png"
                                        alt=""></span></td>
                            <td title="${item.blogUpdateDate | date}">${item.blogUpdateDate | timeago}</td>
                            <td>${item.blogUpdater.name}</td>
                            <td class="right aligned">
                                <a if.bind="isSuper || blog.creator.username == loginUser.username || blog.openEdit"
                                    class="${!$parent.ajax1 || $parent.ajax1.readyState == 4 ? '' : 'tms-disabled'}"
                                    click.delegate="restoreHandler(item)">还原此版本</a>
                                <span if.bind="isSuper || blog.creator.username == loginUser.username"> · </span>
                                <a if.bind="isSuper || blog.creator.username == loginUser.username" ui-dropdown-action
                                    style="margin-right: .75em;"
                                    class="ui icon top right pointing dropdown ${!$parent.ajax2 || $parent.ajax2.readyState == 4 ? '' : 'disabled'}"
                                    title="删除博文历史记录">
                                    <span style="color: red;">删除</span>
                                    <div class="menu">
                                        <div style="color: red;" class="item" click.delegate="removeHandler(item)"><i
                                                class="trash outline icon"></i>确认删除</div>
                                    </div>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </em-modal>
    <em-blog-history-view view-model.ref="blogHistoryViewVm"></em-blog-history-view>
    <em-blog-history-diff view-model.ref="blogHistoryDiffVm"></em-blog-history-diff>
</template>
